<script setup lang="ts">
import { ref } from 'vue';
import layout from './components/layout.vue'
const popup = ref<boolean>(false)

const openPopup = () => {
  popup.value = true
}
</script>

<template>
  <layout>
    <div class="main-content">
      <t-button class="add-button" theme="primary" @click="openPopup">添加记录</t-button>
      <t-popup 
        v-model="popup" 
        placement="bottom" 
        :closeOnOverlayClick="false" 
        closeBtn 
        style="height: 200px">
        <div class="header">添加记录</div>
        <t-form label-align="left">
          <t-form-item label="当前记录">
            <t-input></t-input>
          </t-form-item>
        </t-form>
        <t-button class="submit-button" theme="primary">提交</t-button>
      </t-popup>
    </div>
    
  </layout>
</template>

<style scoped>
.main-content {
  padding: 20px;
}
.add-button {
  margin-top: 20px;
  width: 100%;
}

.submit-button {
  width: calc(100% - 40px);
  margin: 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold;
  height: 50px;
}
</style>
